<template>
  <div class="container">
    <van-nav-bar
        title="预约会议室"
        left-text="返回"
        left-arrow
        @click-left="backPrePage"
    />
    <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
    >
      预定列表
    </van-divider>
    <div :class="classFlag">
      <div class="meet-detail">
        <img :src="point" class="img-point">
        <div class="meet-title"> {{ meetData.meetTitle }}</div>
      </div>

      <div class="time-shell">
        <div class="meet-date"> 会议时间：{{ meetData.dateValue }}</div>&nbsp;&nbsp;&nbsp;
        <div class="meet-time"> {{ meetData.tempMeetTime }}</div>
      </div>
      <div class="meet-shell">参会议室：{{ meetData.meetPlace }}</div>
      <div class="meet-place">会议地点：{{ meetData.address }}</div>

      <van-divider
          :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      />
      <div class="inline">
        <div v-if="canceFlag" class="my-order" @click="canceMeet">取消预定</div>
        <div v-if="!canceFlag" class="my-order-cance" @click="reverMeet">已取消预定</div>
        <div class="my-call">通知参会人</div>
        <div class="my-detail" @click="submit">会议详情</div>
      </div>
    </div>
    <div class="white-bg-2">
      <div class="meet-detail">
        <img :src="point" class="img-point">
        <div class="meet-title"> 会议主题</div>
      </div>
      <div class="time-shell">
        <div class="meet-date"> 会议时间：2022年1月17日</div>&nbsp;&nbsp;&nbsp;
        <div class="meet-time"> 13:00 ~ 13:30</div>
      </div>
      <div class="meet-shell">参会议室：5201 会议室</div>
      <div class="meet-place">会议地点：北京市东城区东四北大街细管胡同7号</div>

      <van-divider
          :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      />
      <div class="inline">
        <div v-if="canceFlag" class="my-order" @click="canceMeet">取消预定</div>
        <div v-if="!canceFlag" class="my-order-cance" @click="reverMeet">已取消预定</div>
        <div class="my-call">通知参会人</div>
        <div class="my-detail" @click="submit">会议详情</div>
      </div>
    </div>
  </div>
</template>

<script>
import SelectMultiple from "../../components/SelectMultiple";
import VanFieldCheckbox from "../../components/VanFieldCheckbox";
import Util from "../../utils/utils";

export default {
  name: "MeetReserve",

  components: {SelectMultiple, VanFieldCheckbox},
  data() {
    return {
      point: require('@/assets/icon/point.png'),
      classFlag: 'hiddenClass',
      canceFlag: true,
      meetData: {
        meetTitle: '', //会议主题
        dateValue: '2021年12月20日',
        tempMeetTime: '',//会议时间
        meetType: '1',//会议类型
        manArray: [],// 选中参会人员集合
        meetPlace: '',  //会议地点
        address: '',//联系方式
        meetSummary: '', //会议概要
      },
    }
  },
  created() {
    const flag = this.$route.query.meetTitle | 'gblfy'
    console.log(flag)
    if (flag === 'gblfy') {
      // console.log("22")
    } else {
      this.classFlag = 'white-bg';
      this.meetData.meetTitle = this.$route.query.meetTitle
      this.meetData.dateValue = this.$route.query.dateValue
      this.meetData.meetPlace = this.$route.query.meetPlace
      this.meetData.tempMeetTime = this.$route.query.tempMeetTime
      this.meetData.address = this.$route.query.address
    }
  },
  methods: {
    backPrePage() {
      this.$router.go(-1);
    },
    canceMeet() {
      this.canceFlag = false
    },
    reverMeet() {
      this.canceFlag = true
    },
    myReserve() {

    },

    submit() {
      this.$router.push('/meet/meetDetail')
      // this.$router.push('/meet/meetReserve?meetTitle=' + this.meetData.meetTitle
      //     + "&dateValue=" + this.meetData.dateValue
      //     + "&tempMeetTime=" + this.tempMeetTime
      //     + "&meetPlace=" + this.meetData.meetPlace
      //     + "&address=" + this.meetData.address)
    }
  }
}
</script>

<style lang="less" scoped>
.meet-detail {
  display: flex;
}

.img-point {
  margin-top: 5%;
  height: 0.66667rem;
  width: 0.66667rem;
  margin-left: 5%;
}

.hiddenClass {
  display: none;
  background-color: #ffffff;
  border-radius: 5%;
  margin-left: 2%;
  margin-right: 2%;
}

.container {
  height: 100vh;
  width: 100vw;
  background-color: #f4f4f4;
}

.white-bg {
  background-color: #ffffff;
  border-radius: 5%;
  margin-left: 2%;
  margin-right: 2%;
}

.meet-title {
  padding-top: 3%;
  padding-left: 5%;
  font-size: 20px;
}

.time-shell {
  display: flex;
  padding-left: 3%;
  display: flex;
  font-size: 0.4rem;
  padding-top: 2%;
  color: darkgrey;
}

.meet-shell {
  padding-left: 3%;
  color: darkgrey;
  padding-top: 2%;
  font-size: 0.4rem;
}

.meet-place {
  padding-left: 3%;
  color: darkgrey;
  padding-top: 2%;
  font-size: 0.4rem;
}

.inline {
  display: flex;
  color: #1989fa;
  font-size: 16px;
  margin-top: -3%;
}

.my-order {
  padding-left: 10%;
}

.my-order-cance {
  padding-left: 5%;
  color: darkgrey;
}

.my-call {
  padding-left: 12%;
}

.my-detail {
  padding-left: 15%;
}

.white-bg-2 {
  margin-top: 2%;
  background-color: #ffffff;
  border-radius: 5%;
  margin-left: 2%;
  margin-right: 2%;
}
</style>
